<template>
	<doc-main>
		<div class="col-lg-12">
			<h4>Carousel 轮播</h4>
			<h5>概述</h5>
			<p>轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。</p>
			<h5>如何使用:</h5>
			<p>使用 <code>Carousel</code> 组件，指定图标对应的options属性，示例代码：</p>
			<code-parsing language="js hljs javascript">{{code}}</code-parsing>
			<h5>效果:</h5>

            <div>
                <carousel>
                    <carousel-item>
                        <div style="width: 100%;height: 200px;background: #c9302c"></div>
                    </carousel-item>
                    <carousel-item>
                        <div style="width: 100%;height: 200px;background: #eee022"></div>
                    </carousel-item>
                    <carousel-item>
                        <div style="width: 100%;height: 200px;background: #b85bc9"></div>
                    </carousel-item>
                    <carousel-item>
                        <div style="width: 100%;height: 200px;background: #3168c9"></div>
                    </carousel-item>
                </carousel>
            </div>
			<div>
				<h5>参数</h5>
				<table class="table table-bordered">
					<thead>
					<tr>
						<th>属性</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>options</td>
						<td>Api: <a href="http://idangero.us/swiper/api/#.WUUK9WiGNFE" target="_blank">Siwper</a></td>
						<td>Object</td>
						<td>-</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</doc-main>
</template>

<script>
	import DocMain from '../layout/DocMain.vue';
	import CodeParsing from '../layout/CodeParsing';
	import { carousel } from '../../html/data';
    import Carousel from '../../../js/components/widget/Carousel.vue';
    import CarouselItem from '../../../js/components/widget/CarouselItem.vue';
	export default {
		data () {
			return {
				code: carousel,
				items: []
			};
		},
		components: {
            CodeParsing,
			CarouselItem,
			Carousel,
			DocMain
		},
		mounted () {
			setTimeout(() => {
				this.items = ['Item', 'Menu', 'Class', 'Object'];
			}, 2000);
		}
	};
</script>
